<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :lg="6">
        <Card title="总销售额" value="¥ 126560">
          <template>
            <span class="monitor-sales">
              月同比 56.67% <i class="el-icon-caret-top icon-red" /> 日同比
              19.16%
              <i class="el-icon-caret-bottom icon-green" />
            </span>
          </template>
          <template #footer>
            日销售额¥ 12423
          </template>
        </Card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <Card title="访问量" value="88460">
          <template>
            <LineChart />
          </template>
          <template #footer>
            日访问量 1234
          </template>
        </Card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <Card title="支付笔数" value="182425">
          <template>
            <BarChart />
          </template>
          <template #footer>
            转化率 60.2%
          </template>
        </Card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="6">
        <Card title="运营活动效果" value="78%">
          <template>
            <ProgressChart />
          </template>
          <template #footer>
            周同比 12% <i class="el-icon-caret-top icon-red" />日同比 11%
            <i class="el-icon-caret-bottom icon-green" />
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Card from './components/Card.vue'
import LineChart from './components/LineChart.vue'
import BarChart from './components/BarChart.vue'
import ProgressChart from './components/ProgressChart.vue'

export default {
  name: 'Monitor',
  components: {
    Card,
    LineChart,
    BarChart,
    ProgressChart
  }
}
</script>

<style lang="sass" scoped>
.dashboard
  padding: 10px
.icon-red
  color: red
.icon-green
  color: green
.monitor-sales
  display: flex
  align-items: center
  font-size: 14px
</style>
